<template>
	<div class="waterlist">
		<ul>
			<template  v-for="keys in new_arr" >
				<template v-if="keys.title==title" >
					<li @click="getInfo(item.pid)" v-for="item in keys.list" :key='item.pid' >
						<router-link to="" >
							<div class="column-top" :style="[{width:'4.7rem',height:'3.5rem'},{background:'url('+item.imgUrl+')',backgroundSize:'cover',backgroundPosition: 'center'}]">
								<p>{{item.city}}</p>
							</div>
							<p class="ptxt">{{item.title}}</p>
							<div class="column-buttom">
								<div class="buttom-type">
									<span>{{item.productType}}<em>·</em></span>
									<span>{{item.productCat}}<em>·</em></span>
									<span>{{item.days}}</span>
								</div>
								<div class="buttom-text">
									<label :class="{'default':typeof(item.priceLabel)==='string'}"><em v-if="typeof(item.priceLabel)==='number'">￥</em>{{item.priceLabel}}<em v-if="typeof(item.priceLabel)==='number'">起</em></label><span v-if="typeof(item.numLabel)==='number'">{{item.numLabel}}人已报名</span><span v-else>{{item.numLabel}}</span>
								</div>
							</div>
						</router-link>
					</li>
				</template>
			</template>
		</ul>
	</div>
	
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		name:'Waterlist',
		data(){
			return{
				new_arr:[]
			}
		},
		created() {
			this.axios.get('./api/water.json').then((res)=>{
				this.new_arr=res.data.arr
			}).catch((error)=>{
				console.log(error);
			})
		},
		computed:{
			...mapState(['title'])
		},
		methods:{
			getInfo(id){
				this.$router.push({path:'/info',query:{pid:id}})
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.waterlist{
		padding-bottom: 0.2rem;
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.waterlist ul {
		width: 100%;
	}
	.waterlist ul li{
		float: left;
		padding-bottom: 0.1rem;
		background-color: white;
		margin-top: 0.2rem;
		width: 49%;
		height: 6.2rem;
		border-radius: 0.2rem;
		overflow: hidden;
	}
	.waterlist ul li:nth-child(even){
		float: right;
	}
	.waterlist .column-top{
		position: relative;
		width: 4.7rem;
		height: 3.5rem;
	}
	.waterlist .column-top p{
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		padding: 0.1rem 0.2rem;
		color: 0.2rem;
		border-radius: 0 0 0.3rem  0;
		background: rgba(0,0,0,0.6);
	}
	.waterlist ul li .ptxt{
		font-weight: bold;
		font-size: 0.37rem;
		/* 多行文字做省略号：最后一行文字超过高度，移除隐藏且用省略号替代 */
		overflow: hidden;
		display: -webkit-box; /* 转为盒子 */
		-webkit-line-clamp: 2;/* 与高度有关 */
		/* 超出盒子的范围用省略号代替 */
		-webkit-box-orient: vertical;
		padding: 0.3rem 0.2rem 0 0.2rem;
		margin-bottom: 0.2rem;
	}
	.column-buttom{
		width: 100%;
	}
	.buttom-type{
		color: #888;
		display: flex;
		width: 100%;
	}
	.buttom-type span:nth-child(1){
		margin-left: 5%;
	}
	.buttom-type span em{
		margin:0 0.05rem;
	}
	.buttom-text{
		width: 93%;
		margin:  0 auto;
		display: flex;
		justify-content: space-between;
		align-content: center;
		line-height: 1rem;
		font-size: 0.3rem;
	}
	.buttom-text label{
		font-weight: bold;
		font-size: 0.43rem;
		color: #ff7100;
	}
	.buttom-text label em{
		font-size: 0.3rem;
	}
	.buttom-text span{
		color: #999;
	}
	.default{
		font-weight: normal !important;
		font-size: 0.3rem !important;
	}
</style>
